<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="flexible.js"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        html,body{
            width:100%;
            height:100%;
        }
        .clearfix:after{
            clear:both;
            display:table;
            content:""
        }
        .fl{
            float:left;
        }
        .product{
            width:50%;
            padding:0.2rem;
            box-sizing: border-box;
        }
        .product img{
            width:100%;
            opacity:0.1;
            transition:all 1s;
        }

        #loading{
            box-shadow:3px 3px 3px 10px white;
            background:white;
            border-radius:5px;
            text-align:center;
            line-height:2rem;
        }
        #d1{
            position:fixed;
            z-index:9999;
            width:100%;
            height:100%;
            background:transparent;
            display:none;
            align-items: center;
            justify-content: center;
        }
        #productList{
            display: none;
        }
    </style>
</head>
<body>

<div id="d1">
    <div id="loading"><img src="images/timg.gif" width="70%" /></div>
</div>



<div class="all">

    <div onclick="toTop()"
         style="position:fixed;right:0.3rem;bottom:4rem;background:white"
    >回到顶部</div>

    <div id="productList" class="clearfix">

    </div>
    <div id="loading2"
         style="text-align:center;height:1rem;display:none"
    ><img style="vertical-align: middle" src="images/timg.gif" height="90%" /> 正在加载 ...</div>
</div>

<script>
    var loadedImageCount = 0;
    var page = 0;
    //  var isDone = true;

    window.onload = function(){
        window.onscroll = function(){
            var st = document.body.scrollTop||document.documentElement.scrollTop; //0
            var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136
            var sh = document.body.scrollHeight||document.documentElement.scrollHeight;

            var isDaoDi = st + ch == sh;
            if(isDaoDi&&!diXian){
                loadNextPageData();
            }
            loadRealImage();
        }
    };

    loadNextPageData();

    var timer;
    function toTop(){
        $("html,body").animate({ scrollTop: 0 }, 500);
//       var st = document.body.scrollTop||document.documentElement.scrollTop;
//       var speed = st/30;
//       console.log(speed);
//       timer = setInterval(function(){
//           if(st==0){
//               clearInterval(timer);
//           }
//
//           var currentTop = parseInt(st);
//           document.body.scrollTop = currentTop - speed;
//           document.documentElement.scrollTop = currentTop - speed;
//       },2);
    }

    function loadNextPageData(){
        // if(!isDone){
        //    return;
        // }
        page++;

        if(page>=2){
            loading2.style.display = "block";
        }
        //4996
        // var pageCount = (page-1)*44+4900;
        var pageCount = (page-1)*44;
        //  var pageCount = 4996;
        // 1 ==> 0
        // 2 ==> 44
        // 3 ==> 88
        // 4 ==>132
        // d1.style.display = "flex";


        //isDone = false;



        $.ajax(
            {
                url:"https://s.taobao.com/search?data-key=s" +
                "&data-value="+pageCount+"&ajax=true" +
                "&_ksTS=1530243656560_891" +
                "&q=%E7%94%B7%E9%9E%8B&refpid=" +
                "430267_1006&source=tbsy&" +
                "style=grid&tab=all&" +
                "pvid=b8318040521666151a70a5f3eebd88c3" +
                "&clk1=0bf0718470c87df17b328af7d5f0e69e" +
                "&spm=a21bo.2017.201856-sline." +
                "2.5af911d9RRzslq&bcoffset=0" +
                "&p4ppushleft=3%2C44",

                dataType:"jsonp",
                success:function(data){
                    loadData(data);
                    // console.log(data);
                }
            }
        );
    }
    var diXian;

    function loadData(data){
        // productArr 是产品信息数组
        if(!data.mods.itemlist.data){
            if(!diXian) {
                diXian = document.createElement("div");
                diXian.innerHTML = "我是有底线的";
                diXian.style.textAlign = "center";
                diXian.style.padding = "0.5rem";
                document.body.appendChild(diXian);
                loading2.style.display = "none";
            }
            d1.style.display = "none";
            return;
        }

        var productArr = data.mods.itemlist.data.auctions;



        for(var i=0;i<productArr.length;i++){
            // p 就是某一个件商品
            var p = productArr[i];
            var productDiv = document.createElement("div");
            productDiv.className = "product fl";

            var image = document.createElement("img");
            //image.src = "http:" + p.pic_url+"_180x180.jpg_.webp";
            // image.src = "http:" + p.pic_url;
            image.setAttribute("real_image_src","http:" + p.pic_url+"_180x180.jpg");
            image.src = "images/dot.png";
            var titleDiv = document.createElement("div");
            titleDiv.innerHTML = p.title;
            var priceDiv = document.createElement("div");
            priceDiv.innerHTML = p.view_price;


            productDiv.appendChild(image);
            productDiv.appendChild(titleDiv);
            productDiv.appendChild(priceDiv);

            productDiv.p = p;
            // 单击某一件商品
            productDiv.onclick = function(){
                // 跳转商品详情页
                // JSON.stringify(p) 将p这个对象转成JSON字符串

                localStorage.setItem("currentP",JSON.stringify(this.p));
                location = "item.html";
            };

            productList.appendChild(productDiv);
        }

        //  isDone = true;

        // productList.getElementsByTagName("img");
        // jquery 充分使用了css3 选择器来作为选择元素的方法
        // onclick = load();
        // onmouseover = mouseover();
        // onload = load();
        // 原生JS事件写法
//       d1.onclick = function(){
//
//       }
        // jQuery 事件写法
//       $("#d1").click(function(){
//
//       });

        // img 有一个事件名为onload ，意思是当图片加载完成后执行
        loadedImageCount = 0;



        $("#productList img").load(
            function(){
                loadedImageCount++;

                // console.log(loadedImageCount);
                if(productArr.length==loadedImageCount){
                    console.log("所有图片加载完毕！")
                    // 在1秒内让该元素淡入出现
                    $("#productList").fadeIn(400);
                    //加载真实图片
                    loadRealImage();
                    d1.style.display = "none";

                }
            }
        );

    }

    function loadRealImage(){
        var images = productList.getElementsByTagName("img");
        // 这三十六张图
        // 首先俺们要显示在可视区域的图片


        var st = document.body.scrollTop||document.documentElement.scrollTop; //0
        var ch = document.body.clientHeight||document.documentElement.clientHeight;//1136
        var sh = document.body.scrollHeight||document.documentElement.scrollHeight;

        // 某元素离顶部距离加上该元素的高度，如果这个结果小于 1136,
        // 该元素就完全在可视区域
        // pic 是一个普通图片元素

        for(var i=0;i<images.length;i++) {
            var picParent = images[i].parentNode;
            //eleheight 元素高度
            var eleheight = $(picParent).height();
            //eleOffsetTop 元素离顶部距离
            var eleOffsetTop = $(picParent).offset().top;

            if(eleheight+eleOffsetTop-st<ch){
                if(images[i].getAttribute("real_image_src")) {
                    images[i].src = images[i].getAttribute("real_image_src");
                    images[i].setAttribute("real_image_src", "");
                    images[i].style.opacity = 1;
                }

            }
        }
    }
</script>











</body>
</html>